import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import Tablist from '../../components/Tablist/Tablist'
import { Card, Empty } from 'antd-mobile'
import './Coupon.less'
import { reqCoupon } from '../../request/api'
import { fliterTime } from '../../filters'

export default class Coupon extends Component {
  constructor() {
    super()
    this.state = {
      coupon: [],
      n:0
    }
    this.arr = ['未使用', '已使用', '已失效']
  }
  render() {
    let { coupon,n } = this.state;
    return (
      <div className='coupon'>
        <Header title='优惠券' back></Header>
        {/* <Tablist arr={this.arr}></Tablist> */}
        <div className='nav'>
         {this.arr.map((item,index)=>{
           return  <div key={index}><span   className={index==n?'active':''} onClick={()=>this.changeN(index)}>{item}</span></div>
         })}
        </div>
        {coupon.length > 0 ?
          <div>
             {coupon[n].content.map((i,ind) => {
                    return <Card key={i.id} title={<div className='content' >
                      <div className='money'>
                        ￥<i>{i.money}</i>
                        <p>满{i.limit_money}元可用</p>
                      </div>
                      <div className='desc'>
                        <h4>{i.title}</h4>
                        <p>{fliterTime(i.begintime)} 至 {fliterTime(i.endtime)}</p>
                      </div>
                    </div>} >
                      <p className='text'>使用规则：{i.description}</p>
                    </Card>
                  })}</div> : <Empty description='暂无数据' />}

      </div>
    )
  }
  componentDidMount() {
    reqCoupon().then(res => {
      this.setState({
        coupon: res.data.list
      })
    })
  }
  changeN(n){
    this.setState({
      n
    })
  }
}
